<template>
    <div class="support-box bg-white van-hairline--bottom">
        <div class="info-box">
            <div class="avatar-box">
                <img class="avatar" :src="item.avatar" />
                <div class="name">{{item.nickname}}</div>
            </div>
            <div class="price">支持{{moneyText}}元</div>
        </div>
        <div class="content ellispis">
            {{item.message}}
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'SupportItem',
    props: {
        /** 数据 */
        item: {
            type: Object,
            required: true,
        },
    },
    computed: {
        /** 支持金额 */
        moneyText() {
            return currency(this.item.money);
        },
    },
};
</script>

<style lang="less">
.support-box {
    padding: 10px 20px;
    .info-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .avatar-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            .avatar {
                width: 34px;
                height: 34px;
                border-radius: 50%;
            }
            .name {
                margin-left: 10px;
                font-size: 14px;
                color: #101010;
                vertical-align: middle;
            }
        }
        .price {
            font-size: 14px;
            color: #e95930;
        }
    }
    .content {
        margin: 10px 20px;
        font-size: 16px;
        color: #101010;
    }
    .ellispis {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
</style>